<template>
  <div class="Home">
      <div class="Homeheader">领券购物，自买可省钱，...</div>
     
      <Home-Swipe></Home-Swipe>
      <Home-List></Home-List>
      <Home-Container :todos="todos"></Home-Container>
      <Home-Footer></Home-Footer>
  </div> 


    
</template>

<script>
import { mapState,mapMutations,mapGetters  } from 'vuex';
import { Swipe, SwipeItem } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import config from 'config'
import HomeSwipe from './component/HomeSwipe';
import HomeList from './component/HomeList';
import HomeContainer from './component/HomeContainer'
import HomeFooter from '../../pages/footer'
import axios from 'axios';
export default {
  name:"Home",
  data(){
    return{
      todos:[],
      page:1
    }
  },
  components:{
    HomeSwipe,
    HomeList,
    HomeContainer,
    HomeFooter
  },
  beforeMount() {
  // 在页面挂载前就发起请求
   this.getData()
  },
  mounted:function(){
    var _this=this
    this.scroll(this.todos)
  },
  methods:{
    getData:function(){
      var _this=this
      axios.get("/api/common/goodspdd/list").then(function(res){
        _this.todos=res.data.data
      })
    },
    scroll:function(data) {
       var _this=this
        let isLoading = false
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 50
            if (bottomOfWindow && isLoading == false) {
                isLoading = true
                axios.get(
                    "/api/common/goodspdd/list",
                    {
                      params:{
                          page:_this.page+1
                        }
                    }
                    ).then(response => {
                        _this.page++;
                        for(var i=0;i<response.data.data.length;i++){
                            _this.todos.push(response.data.data[i])
                        }
                isLoading = false
            })
            }
        }
    },
  }
}
</script>

<style>
  .Home{
    border-bottom: 10px;
  }

   .Homeheader{
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1;
     height: 1.0rem;
     line-height: 1.3rem;
     font-size: 0.35rem;
     color: #fff;
     line-height: 1rem;
     padding-left: 0.3rem;
     background: #ff4040;

   } 
 
</style>

